<template>
  <div class="login">
    <div class="login-form">
      <h2>欢迎登陆</h2>

      <el-form-item prop="username">
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="请输入您的账号"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType ? 'text' : 'password'"
          placeholder="请输入您的密码"
          name="password"
          tabindex="2"
          auto-complete="on"
        />
        <span class="show-pwd" @click="showPwd">
          <i class="el-icon-view"></i>
        </span>
      </el-form-item>

      <el-button
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click="handleLogin"
        >Login</el-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
export default defineComponent({
  setup() {
    const router = useRouter();
    const state = reactive({
      passwordType: false,
      loading: false,
      loginForm: {
        username: 'lyh',
        password: '123456',
      },
    });

    const handleLogin = () => {
      if (!state.loginForm.username || !state.loginForm.password) {
        ElMessage.error('账号密码不能为空');
        return false;
      }
      router.replace('/home');
    };
    const showPwd = () => {
      state.passwordType = !state.passwordType;
      console.log(state.passwordType);
    };
    return {
      ...toRefs(state),
      handleLogin,
      showPwd,
    };
  },
});
</script>

<style lang="scss">
.login {
  input {
    background-color: #283443 !important;
    border-color: #ffffff1a;
    color: #fff;
    padding: 24px 20px;
  }
}
</style>
<style scoped lang="scss">
.login {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #2d3a4b;
  color: #fff;
  .login-form {
    width: 520px;
    padding: 160px 35px 0;
    margin: 0 auto;
    h2 {
      text-align: center;
    }
    .el-form-item {
      position: relative;

      .show-pwd {
        position: absolute;
        right: 10px;
        top: 4px;
        color: #ccc;
      }
    }
  }
}
</style>
